<template>
	<div>
		<el-drawer title="" :visible.sync="drawer" :direction="direction" :before-close="handleClose" custom-class="drawer-info">
			<div class="info-item">
				<h5 class="from-title">基本信息</h5>
				<div class="form-item">
					<label class="form-item-label">名称:</label>
					<div class="form-item-content">{{ objInfo.name }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">标识:</label>
					<div class="form-item-content">
						{{ objInfo.code }}
						<fortress-copy :copyData="objInfo.code"></fortress-copy>
					</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">SEO标题:</label>
					<div class="form-item-content">{{ objInfo.title }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">SEO描述:</label>
					<div class="form-item-content">{{ objInfo.info }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">SEO关键字:</label>
					<div class="form-item-content">{{ objInfo.keywords }}</div>
				</div>

				<div class="form-item">
					<label class="form-item-label">上级栏目:</label>
					<div class="form-item-content">{{ parentName }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">是否显示:</label>
					<div class="form-item-content" v-if="objInfo.showflag">显示</div>
					<div class="form-item-content" v-else>隐藏</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">属性:</label>
					<div class="form-item-content">{{ objInfo.categoryName }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">访问地址:</label>
					<div class="form-item-content">
						{{ objInfo.url }}
						<fortress-copy :copyData="objInfo.url"></fortress-copy>
					</div>
				</div>

				<div class="form-item">
					<label class="form-item-label">图片:</label>
					<div class="form-item-content">
						<img v-if="objInfo.image" :src="objInfo.image" style="width: 100px; height: 100px" />
					</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">内容:</label>
					<div class="form-item-content" v-html="objInfo.content"></div>
				</div>
				<div class="form-item">
					<label class="form-item-label">外链地址:</label>
					<div class="form-item-content">
						{{ objInfo.weburl }}
						<fortress-copy :copyData="objInfo.weburl"></fortress-copy>
					</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">列表模板:</label>
					<div class="form-item-content">{{ objInfo.listtp }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">封面模板:</label>
					<div class="form-item-content">{{ objInfo.covertp }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">文章模板:</label>
					<div class="form-item-content">{{ objInfo.articletp }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">模型:</label>
					<div class="form-item-content">{{ modelFmt(objInfo.model) }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">排序:</label>
					<div class="form-item-content">{{ objInfo.sort }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">是否审核:</label>
					<div class="form-item-content" v-if="objInfo.auditflag">需要审核</div>
					<div class="form-item-content" v-else>无需审核</div>
				</div>
			</div>
		</el-drawer>
	</div>
</template>
<script>
import { cmschannelInfo } from "@/api/cms/cmschannel.js"
import { enumList, urlList } from "@/api/public.api.js"
export default {
	data() {
		return {
			drawer: true,
			direction: "rtl",
			objInfo: {},
			parentName: "无",
			ChannelCategory_cmsList: [],
			YesNoList: [],
			listtpList: [],
			covertpList: [],
			articletpList: [],
			modelList: [],
		}
	},
	created() {},
	methods: {
		queryEnumList() {
			this.ChannelCategory_cmsList = []
			enumList("ChannelCategory", "cms").then(resp => {
				if (resp.code == 0) {
					this.ChannelCategory_cmsList = resp.data
				}
			})
			this.YesNoList = []
			enumList("YesNo", "").then(resp => {
				if (resp.code == 0) {
					this.YesNoList = resp.data
				}
			})
		},
		queryUrlList() {
			this.listtpList = []
			urlList("/cms/cmsTemplate/filter").then(resp => {
				if (resp.code == 0) {
					if (resp.data) {
						resp.data.forEach(item => {
							this.listtpList.push({ code: item.fileName, name: item.fileName })
						})
					}
				}
			})
			this.covertpList = []
			urlList("/cms/cmsTemplate/filter").then(resp => {
				if (resp.code == 0) {
					if (resp.data) {
						resp.data.forEach(item => {
							this.covertpList.push({ code: item.fileName, name: item.fileName })
						})
					}
				}
			})
			this.articletpList = []
			urlList("/cms/cmsTemplate/filter").then(resp => {
				if (resp.code == 0) {
					if (resp.data) {
						resp.data.forEach(item => {
							this.articletpList.push({ code: item.fileName, name: item.fileName })
						})
					}
				}
			})
			this.modelList = []
			urlList("/cms/cmsModel/list").then(resp => {
				if (resp.code == 0) {
					if (resp.data) {
						resp.data.forEach(item => {
							this.modelList.push({ code: item.id, name: item.title })
						})
					}
				}
			})
		},
		init(id) {
			this.queryEnumList()
			this.queryUrlList()
			if (id) {
				cmschannelInfo(id).then(res => {
					this.objInfo = res.data
					let categoryObj = this.ChannelCategory_cmsList.find(item => {
						return item.code == this.objInfo.category
					})
					this.objInfo.categoryName = categoryObj ? categoryObj.name : ""
					let listtpObj = this.listtpList.find(item => {
						return item.code == this.objInfo.listtp
					})
					this.objInfo.listtpName = listtpObj ? listtpObj.name : ""
					let covertpObj = this.covertpList.find(item => {
						return item.code == this.objInfo.covertp
					})
					this.objInfo.covertpName = covertpObj ? covertpObj.name : ""
					let articletpObj = this.articletpList.find(item => {
						return item.code == this.objInfo.articletp
					})
					this.objInfo.articletpName = articletpObj ? articletpObj.name : ""
					let modelObj = this.modelList.find(item => {
						return item.code == this.objInfo.model
					})
					this.objInfo.modelName = modelObj ? modelObj.name : ""
					if (this.objInfo.parentId) {
						cmschannelInfo(this.objInfo.parentId).then(res => {
							this.parentName = res.data.name
						})
					}
				})
			}
			this.drawer = true
		},
		// 关闭抽屉
		handleClose(done) {
			done()
		},
		modelFmt(row) {
			let name = ""
			if (this.modelList) {
				this.modelList.forEach(item => {
					if (item.code == row) {
						name = item.name
					}
				})
			}
			return name
		},
	},
}
</script>
<style scoped>
.from-title {
	margin-bottom: 20px;
	padding: 0 20px 20px 20px;
	font-size: 16px;
	color: #17233d;
	border-bottom: 1px solid #eee;
}
.info-item {
	margin-bottom: 40px;
}

.form-item {
	margin-bottom: 20px;
	font-size: 14px;
}
.form-item-label {
	text-align: right;
	float: left;
	width: 25%;
}
.form-item-content {
	margin-left: 30%;
	width: 70%;
}
</style>
